<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>template标签使用</title>
	</head>
	<body>
		<button id="changeImg">改变图片</button>
		<span>template标签</span>
		<template>
			<ul>
				<li>列表1</li>
				<li>列表2</li>
				<li>列表3</li>
			</ul>
		</template>
		<!-- 
			HTML内容模板(<template>)元件是用于保持被加载时，一个页不被渲染，
			但随后可以在运行期间使用 javascript 来实例化的客户端的机制
		 -->
		
		<img id="" src="../../../img/advertisement/advertise1.png" />
		<!-- <script type="text/template">
			// 实际上，并不存在type="text/template"这样的标准写法，
			//<template>元素的出现旨在让HTML模板HTML变得更加标准与规范。
			<img src="../../../img/advertisement/advertise1.png" />
		</script> -->
		<textarea style="display: none;">
			<img src="../../../img/advertisement/advertise1.png" />
		</textarea>
		<xmp style="display: none;">
			<img src="../../../img/advertisement/advertise1.png" />
		</xmp>
		<template><!-- ie8 的话因为不支持 template 标签而显示出 img 图片 -->
			<img src="../../../img/advertisement/advertise1.png" />
		</template>
		<!-- 以上四种写法都不会在界面上显示效果，但是其中template标签是为此专门设计出的标准化规范化的标签 -->
		
		<table id="producttable">
			<thead>
				<tr>
					<td>UPC_Code</td>
					<td>Product_Name</td>
				</tr>
			</thead>
			<tbody>
				<!-- 在这里可以选择性地包括既有资料 -->
			</tbody>
		</table>
		
		<template id="productrow">
			<tr>
				<td></td>
				<td></td>
			</tr>
		</template>
	</body>
	<script type="text/javascript">
		// 透过检查HTML template 元素属性是否存在 以测试是否支持该元素标签
		console.log(document.createElement('template'));//其结果为: <template>#document-fragment</template>
		console.log(document.createDocumentFragment('div'));//其结果为: #document-fragment
		console.log(document.createElement('div'));//其结果为: <div></div>
		console.log(document.createElement('div').content);//其结果为: undefined
		//
		
		console.log(document.createElement('template').content);//#docuement-fragment
		//DocumentFragment 接口表示没有父级的最小文档对象.
		
		var imgbtn = docuement.getElementById("changeImg");
		imgbtn.onclick = function(){
			alert(1)
		}
		
		
		if("content" in document.createElement('template')){//检查浏览器是否支持 template 标签元素
			console.log("浏览器 支持 template 标签");
			//
		}else{//eg: 如ie8 的话就会报'不支持 template 标签'
			console.log("浏览器 不支持 template 标签");
		}
	</script>
</html>